<template>
  <div class="filter">
    <div class="filter__result">{{ result }}</div>
    <div
      class="filter__btn"
      @click="isShowOptionSelector = !isShowOptionSelector">筛选</div>
    <van-popup
      v-model="isShowOptionSelector"
      position="left">
      <div class="select">
        <div class="select__option-list">
          <div
            v-for="(option, i) in options"
            :class="{ 'select__option--active': i === active }"
            :key="i"
            class="select__option van-ellipsis"
            @click="active = i">{{ option.label }}</div>
        </div>
        <div
          v-if="options[active]"
          class="select__sub-option-list">
          <div
            v-for="(option, i) in options[active].options"
            :key="i"
            :class="{ 'select__option--readonly': option.readonly }"
            class="select__option van-ellipsis"
            @click="selected(Object.assign({}, option, { type: options[active].label }))">{{ option.label }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
  .filter {
    height: 90px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #F4F5F8;
    box-sizing: border-box;
    padding-left: 32px;
    &__result {
      font-size: 28px;
      color: #B3B3B3;
    }
    &__btn {
      height: 100%;
      font-size: 32px;
      color: #fff;
      padding: 0 48px;
      background-color: #FA8C01;
      display: flex;
      align-items: center;
    }
  }
  .select {
    display: flex;
    height: 100vh;
    width: 100vw;
    &::before {
      content: '';
      background-color: rgba(0, 0, 0, 0.75);
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
    }
    &__option-list {
      background-color: #F4F5F8;
      height: 100%;
      overflow: auto;
      border-right: 2px solid #EEEEEE;
      flex-shrink: 0;
    }
    &__option {
      color: #343434;
      font-size: 28px;
      padding: 16px 32px;
      border-bottom: 2px solid #EEEEEE;
      line-height: 40px;
      &--active, &:active {
        background-color: #FA8C01;
        color: #fff;
      }
      &--readonly {
        color: #B3B3B3;
        &::before {
          content: '# ';
        }
        &:active {
          background-color: #fff;
          color: #B3B3B3;
        }
      }
    }
    &__sub-option-list {
      background-color: #fff;
      height: 100%;
      overflow: auto;
      border-right: 2px solid #EEEEEE;
    }
  }
</style>

<script>
export default {
  props: {
    result: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      isShowOptionSelector: false,
      active: 0
    }
  },
  methods: {
    selected (value) {
      if (value.readonly) return
      this.isShowOptionSelector = !this.isShowOptionSelector
      this.$emit('selected', value)
    }
  }
}
</script>
